<!-- //美发 -->
<template>
	<view>
		<view class="cads" v-for="(item,index) in data_list" :key='index'>
			<view style="display: flex;align-items: center;">
				<view :class="{cads_text1:true,active:act_index==index}" @click="chs(index,item)"></view>
				<view class="cads_text2">
					<view class="cads_text2_t1">{{item.name}}</view>
					<view class="cads_text2_t2">{{item.infor}}</view>
				</view>
			</view>
			
			<view  @click="a(index)">
				<picker @change="bindPickerChange" :range="item.array">	
					
						<label class="">{{item.array[item.indexss]}}</label>		
				</picker>
				<text></text>
			</view>
		</view>
		<view style="display: flex;padding: 47rpx 25rpx;align-items: center;">
			<view :class="{cads_text3:true,active2:flg}" @click="flg=!flg"></view>
			<view style="width: 642rpx;font-size: 26rpx;font-family: PingFang;font-weight: 500;color: #414141;">
				XX平台会员，可同步享受此门店/设计师相关服务的会员折扣和优惠权限；
			</view>
		</view>
		<view style="height: 14rpx;background-color: #F3F3F3;"></view>
		<view class="save">
			<text>保存</text>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				flg:false,
				flg1:true,
				indexs:0,
				act_index:0,
				data_list:[
					{
						name:'基础服务折扣',
						infor:'洗吹、造型、洗剪吹',
						array:['请选择折扣','1折,','2折','3折','4折','5折','6折','7折','8折','9折'],
						indexss:0,
						cont:'请选择折扣'
					},
					{
						name:'项目服务折扣',
						infor:'烫发、染发、护理等',
						array:['请选择折扣','1折','2折','3折','4折','5折','6折','7折','8折','9折'],
						indexss:0,
						cont:'请选择折扣'
					},
					{
						name:'店卖商品折扣',
						infor:'店内销售相关的商品',
						array:['请选择折扣','1折','2折','3折','4折','5折','6折','7折','8折','9折'],
						indexss:0,
						cont:'请选择折扣'
					}
				]
			}
			
		},
		methods:{
			//chs
			chs(index,item){
				this.act_index = index
				console.log(item)
			},
			a(index){
				if(this.act_index  ==index){
					this.indexs = index
					this.flg1=true
				}else{
					uni.showToast({
						title:'请先选择折扣类型',
						icon:'none'
					})
					this.flg1=false
					return
				}
				
				console.log(this.indexs)
			},
			bindPickerChange(e) {	
				if(this.flg1==false){
					console.log('xxx')
					return
				}else{
					this.data_list[this.indexs].indexss= e.target.value
						console.log(e.target.value)
					console.log(this.data_list[this.indexs])
				}
				 
				
				
			
			},
		}	
	}
</script>

<style scoped lang="less">
	.cads{
		padding: 25rpx 25rpx;
		border-bottom: 1rpx solid #E2E2E2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.cads_text1{
			width: 30rpx;
			height: 30rpx;
			background: white;
			border-radius: 50%;
			border: 4rpx solid #D1D1D1;
			margin-right: 42rpx;
			
		}
		.cads_text2{
			.cads_text2_t1{
				
				font-size: 28rpx;
				font-family: PingFang;
				font-weight:bold;
				color: #000000;
			}
			.cads_text2_t2{
				
				font-size: 22rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #8A8A8A;
			}
		}
		.active{
			background: #00C6C2;
		}
	}
	
	.cads_text3{
		width: 30rpx;
		height: 30rpx;
		background:white;
		border-radius: 50%;
		border: 4rpx solid #D1D1D1;
		margin-right: 42rpx;
		
	}
	.active2{
			background: #00C6C2;
		}
	.save{
		width: 350rpx;
		height: 85rpx;
		background: #00C6C2;
		border-radius: 4rpx;
		text-align: center;
		line-height: 85rpx;
		margin: 157rpx auto;
		font-size: 36rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #FFFFFF;
		
	}
</style>
